<template>
<div style="hight:400px;">
  <el-button class="sidemenuStyle_button" @click="viewPublish()" style="width:120px;" type="danger"><i class="el-icon-edit-outline"></i>&nbsp;发&nbsp;布</el-button>
  <Publish ref="publish"></Publish>

  <el-menu
    class="sidemenuStyle"
    default-active="0"
    @select="handleSelect"
    active-text-color="#4BA79F">
    <el-menu-item index="0">
      <i class="el-icon-food" style="color: #F56C6C;"></i>
      <span slot="title">全部</span>
    </el-menu-item>
    <el-menu-item index="1">
      <i class="el-icon-dish" style="color: #409EFF;"></i>
      <span slot="title">原创</span>
    </el-menu-item>
    <el-menu-item index="2">
      <i class="el-icon-dessert"></i>
      <span slot="title">范本</span>
    </el-menu-item>
    <el-menu-item index="3">
      <i class="el-icon-burger" style="color: #f5a623;"></i>
      <span slot="title">翻制</span>
    </el-menu-item>
    <!-- <el-menu-item index="4">
      <i class="el-icon-menu"></i>
      <span slot="title">暂定参数1</span>
    </el-menu-item>
    <el-menu-item index="5">
      <i class="el-icon-menu"></i>
      <span slot="title">暂定参数2</span>
    </el-menu-item>
    <el-menu-item index="6">
      <i class="el-icon-menu"></i>
      <span slot="title">暂定参数3</span>
    </el-menu-item> -->
  </el-menu>
</div>
</template>

<script>
  import Publish from "./Publish"
  export default {
    name: 'SideMenu',
    data () {
      return {
      }
    },
    computed:{
      userName:function () {
        return this.$store.state.user.username
      }
    },
    methods: {
      handleSelect (key) {
        console.log(key)
        this.$store.commit('selectKey',key)
      },
      viewPublish(){
        this.$refs.publish.PublishVisible=true;
      }
    },
    components:{
      Publish
    }
  }
</script>

<style scoped>
  .sidemenuStyle {
    top: 20px;
    width: 150px;
  }
  .sidemenuStyle_button{
    margin-top: 30px;
  }
</style>
